<template>
  <div style="width: 100%">
    <div id="deawer">
      <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" @cancel="cancel" @unbindding="unbindding"></v-tableTitle>
      <div class="detailBox" style="height:200px">
        <v-detail ref="detail"></v-detail>
      </div>
      <div class="detailListBox">
        <v-detailList ref="detailList" @setSelectData="setSelectData"></v-detailList>
      </div>
    </div>
  </div>

</template>

<script>
import baseMixin from '@/mixins/BaseMixin'
import skipMixin from '@/mixins/SkipMixin'
import config from '../Config'
import detail from '../details/Detail'
import detailList from '../detailsList/DetailList'
import tableTitle from 'commons/TableTitle'

export default {
  name: '',
  mixins: [baseMixin, skipMixin, config],
  data() {
    return {
      tableSelectData: [],
      routeData: {}
    }
  },
  created() {},
  computed: {
    btnConfig() {
      return [
        {
          label: this.$t('ex.unbindding'),
          certigier:
            this.detailStatus || !this.btnPermNameList.includes('WM06020602'),
          disabled: true,
          invalid: 'unbindding'
        },
        {
          label: this.$t('common.return'),
          certigier: !this.btnPermNameList.includes('WM06020603'),
          invalid: 'cancel'
        }
      ]
    }
  },
  methods: {
    unbindding(data) {
      data.forEach(async (item, index) => {
        try {
          let res = await this.$api.get(
            `/palletbindding/unbindding/${this.routeData.palletkey}/${item.lpn}`
          )
          
            this.$message.success(res.returnMgr)
            this.$refs.detailList.getTableData(1, {})
            this.$refs.detailList.$refs.table.delSelectData(item, index)
          
        } catch (e) {
          this.$message.error(e)
        }
      })
    },
    //弹框取消
    cancel() {
      this.$router.push({ name: 'palletbindding' })
    },
    setSelectData(data) {
      this.tableSelectData = data
    }
  },
  mounted() {
    
    this.routeData = this.$store.state.routeData
  },
  watch: {
    tableSelectData(data) {
      if (this.permissionStatus) {
        if (data.length > 0) {
          this.detailStatus = false
        } else {
          this.detailStatus = true
        }
      }
    }
  },
  components: {
    'v-detail': detail,
    'v-detailList': detailList,
    'v-tableTitle': tableTitle
  }
}
</script>

<style scoped>
</style>
